<template>
  <div class="section-container-4">
    <div class="header">
      <bannerHeader
        @open="open"
        title1="账户余额"
        title2="Account Balance"
        :isCheck="false"
        unit="( 万元 )"
      />
    </div>
    <div class="show-body">
      <myBar :bannerList="bannerList" :max="max" />
    </div>
  </div>
</template>

<script>
import bannerHeader from "../banner-header-right";
import request from "@/utils/request";
import Qs from "qs";
import { mapState } from "vuex";
import myBar from "./bar";
import fnPopup from "./popup/index.js";
export default {
  components: {
    bannerHeader,
    myBar,
  },
  data() {
    return {
      bannerList: [],
      max: 0,
    };
  },
  computed: {
    ...mapState("reportFormDark", ["deptId", "projectId"]),
  },
  watch: {
    deptId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenBalance(); // 资金账户余额
        });
      },
      immediate: true,
    },
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.screenBalance(); // 资金账户余额
        });
      },
    },
  },
  created() {},
  methods: {
    open() {
      fnPopup(this);
    },
    screenBalance() {
      request({
        url: "/system/screen/balance",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId: this.deptId,
          projectId: this.projectId,
        }),
      }).then((res) => {
        let bannerList = [];
        const barX = ["分公司账户", "电子承兑账户", "农民工专户", "外部单位"];
        let max = 0;
        if (res.data && res.data.length > 0) {
          res.data.forEach((item) => {
            const x = item.deptName;
            const id = item.deptName;
            let total = 0;
            let y = [];
            if (item.infos && item.infos.length > 0) {
              total = item.infos.reduce((t, i) => (t += i.amount || 0), 0);
              if (total) {
                total = (Number(total) / 10000).toFixed(3) || 0;
              }
              item.infos.forEach((el) => {
                if (el.amount) {
                  el.amount = (Number(el.amount) / 10000).toFixed(3) || 0;
                }
                if (el.amount > max) {
                  max = el.amount;
                }
                if (el.pName === barX[0]) {
                  y[0] = el;
                }
                if (el.pName === barX[1]) {
                  y[1] = el;
                }
                if (el.pName === barX[2]) {
                  y[2] = el;
                }
                if (el.pName === barX[3]) {
                  y[3] = el;
                  y[3].pName = "第三方账户";
                }
              });
            }
            bannerList.push({
              x,
              total,
              id,
              y,
            });
          });
        }
        this.max = max;
        this.bannerList = bannerList;
        console.log(this.max, this.bannerList);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/views/report_form_dark/styles/fn.scss";

.section-container-4 {
  width: 100%;
  height: 100%;

  .header {
    width: 100%;
    height: vh(42);
  }

  .show-body {
    width: 100%;
    height: calc(100% - #{vh(42)});
  }
}
</style>